<template>
  <div id='Inquiry'>
    <div class="clearfix bossAuditHead">
      <button class="el-button pull-right longBtn el-button--primary el-button--medium is-round" v-if="thisPageState !== null && thisPageState !== 'Add' && jurisdictionControl.deleteState" @click="delBossAudit">删除</button>
      <button class="el-button pull-right longBtn el-button--primary el-button--medium is-round" v-if="thisPageState !== null && thisPageState !== 'Add' && jurisdictionControl.modification" @click="editBossAudit">编辑</button>
      <button class="el-button pull-right longBtn el-button--primary el-button--medium is-round" v-if="thisPageState == null || thisPageState == 'Add'" v-show="jurisdictionControl.addition" @click="addBossAudit">添加</button>
    </div>
    <div v-if="thisPageState !== null">
      <div class="plateTitle">
        <span>绑定手机号</span>
        <span class="tagging">注：该手机号可以登录查询公司账目，登录账号为手机号，密码为查账密码；一套账只支持绑定一个手机号查账。</span>
      </div>
      <div class="bossInfoInt">
        <el-form :model="saveParams" :rules="rules" ref="saveParams">
          <span class="formLable">老板手机账号：</span>
          <span v-if="thisPageState == 'Edit' || thisPageState == 'Add'">
            <el-form-item prop="phone" style="display: inline-block;margin-bottom: 0;">
              <el-input type="text" v-model="saveParams.phone" placeholder="手机号" class="intInline"></el-input>
            </el-form-item>
            <span class="formLable" v-if="false" style="margin-left: 60px;">查账密码：</span>
            <el-form-item prop="pwd" v-if="false" style="display: inline-block;margin-bottom: 0;">
              <el-input type="password" v-model="saveParams.pwd" placeholder="输入密码" class="intInline"></el-input>
              <span style="color: red;font-size: 12px;" v-if="thisPageState == 'Edit'"> * 本项不填不会修改原先登录密码</span>
            </el-form-item>
          </span>
          <span style="margin-left: 25px;" v-else>{{ bossAuditInfo.phone }}</span>
        </el-form>
      </div>
      <div class="plateTitle">
        <span v-if="thisPageState == 'Add' || thisPageState == 'Edit'">选择要查询的账目模块</span>
        <span v-else>查询的账目模块</span>
      </div>
      <div style="padding-bottom: 80px;">
        <el-table border ref="bossAuditTable" :data="tableData" style="width: 500px" max-height="300" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50" align="center" v-if="thisPageState == 'Edit' || thisPageState == 'Add'"></el-table-column>
          <el-table-column type="index" width="80" align="center" label="序号"></el-table-column>
          <el-table-column prop="authorityName" label="模块" align="center"></el-table-column>
        </el-table>
      </div>
      <div class="submitPlece" v-if="thisPageState == 'Edit' || thisPageState == 'Add'">
        <button class="el-button longBtn el-button--primary el-button--medium is-round quxiao" @click="resetForm">取消</button>
        <button class="el-button longBtn el-button--primary el-button--medium is-round" @click="saveAddOrEdit">保存</button>
      </div>
    </div>
    <div v-else>
      <div>
        <img class="noDataImg" width="300px" src="@/assets/images/dataIsNull.png" alt="">
        <p class="noDataWords">点击右上角的添加按钮添加老板手机号即可实现手机端查询财务财表,无手机端查账需求无需设置此功能哦!</p>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import md5 from 'js-md5';
import * as Vrules from '@/util/validate';
export default {
  name: 'Inquiry',
  data() {
    return {
      saveParams: {
        phone: '',
        pwd: ''
      },
      allModuleList: [],
      thisPageState: null,
      // thisPageState: 'see',
      bossAuditInfo: {},
      multipleSelection: [],
      OwnModuleArr: [],
      tableData: [],
      delPopup: {
        title: '',
        isShow: false,
        describe: ''
      },
      jurisdictionControl: { // 权限
        modification: false, // 编辑
        deleteState: false, // 删除
        addition: false // 添加
      },
      bossid: '',
      randomNum: '',
      rules: {
        phone: [
          { validator: Vrules.isPhone, message: '请输入正确的手机号', trigger: 'change' },
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码不得少于六位', trigger: 'change' }
        ]
      }
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.common.userInfo,
      accountid: state => state.companyInfo.accountId,
      subid: state => state.companyInfo.subid,
      bossaccountid: state => state.companyInfo.bossaccountid
    }),

  },
  methods: {
    getAllModular() {
      this.$api.accountPort.GetSelectAuditModuleList({ accountid: this.accountid }).then(res => {
        let resData = res.data.data;
        this.allModuleList = resData;
        this.getOwnModule();
      });
    },
    GetLinkMan() {//检查是否有数据
      let params = {
        accountid: this.accountid
      };
      this.$api.accountPort.RegExistBossSelect(params).then(res => {
        if (!res.data.data) {
          this.thisPageState = null;
          return false;
        }
        this.thisPageState = 'see';
        this.bossid = res.data.data;
        this.getdetaildata();

      });
    },
    getdetaildata() {//获取详情
      let params = {
        accountid: this.accountid
      };
      this.$api.accountPort.BossAuditDetail(params).then(res => {
        this.bossAuditInfo = res.data.data;
        this.bossid = this.bossAuditInfo ? this.bossAuditInfo.bossid : '';
        this.getAllModular();//获取模板表格数据
      });
    },
    editBossAudit() {
      this.thisPageState = 'Edit';
      this.tableData = this.allModuleList;
      this.getOwnModule();
    },
    addBossAudit() {
      this.thisPageState = 'Add';
      this.saveParams = { // 清空
        phone: '',
        pwd: ''
      };
      this.getAllModular();
    },
    getOwnModule() {//查看的时候 隐藏未选中的模板数据
      if (this.thisPageState == 'Add') {
        this.tableData = this.allModuleList;
        return false;
      }
      let arr = [];
      if (this.bossAuditInfo && this.bossAuditInfo.bossSelectAuthorityList.length != 0) {
        this.OwnModuleArr = this.bossAuditInfo.bossSelectAuthorityList;
        for (let i = 0; i < this.bossAuditInfo.bossSelectAuthorityList.length; i++) {
          for (let j = 0; j < this.allModuleList.length; j++) {
            if (this.allModuleList[j].authorityCode == this.bossAuditInfo.bossSelectAuthorityList[i].authorityCode) {
              arr.push(this.allModuleList[j]);
            }
          }
        }
      }

      if (this.thisPageState == 'Edit') { // 新增和修改要选中表格
        this.saveParams.phone = this.bossAuditInfo.phone; // 修改回显
        arr.forEach(item => {
          this.$nextTick(() => {
            this.$refs.bossAuditTable.toggleRowSelection(item, true);
          });
        });

      } else if (this.thisPageState == 'see') { // 查看只显示自己拥有的
        this.tableData = this.OwnModuleArr;
      }
    },
    saveAddOrEdit() {
      if (this.thisPageState == 'Edit') {
        this.rules.pwd[0].required = false;
      }
      this.$refs['saveParams'].validate((valid) => {
        if (valid) {
          let params = {
            accountid: this.accountid,
            subid: this.subid,
            phone: this.saveParams.phone,
            pwd: md5(this.saveParams.pwd),
            bossSelectAuthorityList: this.multipleSelection
          };

          if (this.thisPageState == 'Add') { // 添加
            this.$api.accountPort.BossAuditedit(params).then(() => {
              this.resetForm('isAddSubmit');
            });
          } else if (this.thisPageState == 'Edit') { // 编辑
            params.id = this.bossAuditInfo.id,
            params.bossid = this.bossid;
            this.$api.accountPort.BossAuditedit(params).then(() => {
              this.resetForm();
            });
          }
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    resetForm(params) {
      if (this.thisPageState == 'Add' && params !== 'isAddSubmit') {
        this.thisPageState = null;
      } else {
        this.thisPageState = 'see';
      }
      this.$refs.bossAuditTable.clearSelection(); // 清除表格选中
      this.$refs['saveParams'].resetFields(); // 清除表单
      this.getdetaildata();
    },
    delBossAudit() {
      this.$confirm('删除后此手机不能在手机端查账', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: false,
        type: 'warning'
      }).then(() => {
        let parmas = {
          accountid: this.accountid,
          bossid: this.bossid
        };
        this.$api.accountPort.BossAuditDelete(parmas).then(() => {
          this.GetLinkMan();
        });

      }).catch(() => {
      });
    },
    getJurisdiction() { // 05-27 | gz | 获取权限数据;
      if (this.userInfo.isadmin) {
        this.jurisdictionControl = {
          modification: true,
          deleteState: true,
          addition: true
        };
        return;
      }
      let params = {
        id: this.bossaccountid
      };
      this.$api.publicApi.GetActionInfo(params).then(res => {
        let resData = res.data.data;
        if (!resData) return;
        resData.forEach(item => {
          if (item.name == "添加账号") {
            this.jurisdictionControl.addition = true;
          }
          if (item.name == "修改账号") {
            this.jurisdictionControl.modification = true;
          }
          if (item.name == "删除账号") {
            this.jurisdictionControl.deleteState = true;
          }
        });
      });
    }
  },
  mounted() {
    this.getJurisdiction();
  },
  activated() {
    if (this.$route.query.randomNum) {
      if (this.randomNum == '') { // 第一次创建
        this.randomNum = this.$route.query.randomNum;
        this.GetLinkMan();
      } else if (this.randomNum == this.$route.query.randomNum) { // 仅仅是切换过来
        return false;
      } else if (this.randomNum !== this.$route.query.randomNum) { // 又进行了其他操作
        this.randomNum = this.$route.query.randomNum;
        this.GetLinkMan();
      }
    } else {
      return;
    }
  }
};
</script>
<style lang='less'>
#Inquiry {
  margin: 10px 20px;
  font-size: 14px;
  position: relative;
  // height: calc(100% - 60px);
  .bossAuditHead {
    margin-bottom: 10px;
    // border-bottom: 1px solid #F7F8FC;
    button {
      margin: 0 10px;
    }
  }
  .plateTitle {
    background: #f7f8fc;
    padding: 8px 20px;
    border-radius: 3px;
  }
  .tagging {
    color: #a3aec3;
    font-size: 12px;
    margin-left: 25px;
  }
  .formLable {
    color: #a3aec3;
  }
  .intInline {
    display: inline-block;
    width: 150px;
  }
  .bossInfoInt {
    margin: 20px 30px;
  }
  .el-table__header th {
    background: none;
  }
  .submitPlece {
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-top: 1px solid #f2f5fb;
    padding: 15px;
    .quxiao {
      background: #98a3bf;
      border-color: #98a3bf;
    }
    button {
      margin: 0 30px;
    }
  }
  .noDataImg {
    margin: 0 auto;
    display: block;
    margin-top: 70px;
  }
  .noDataWords {
    text-align: center;
    color: #9e9e9e;
    margin-top: 20px;
  }
}
</style>
